<template>
    <div>
        <div class="propo" v-if="openprops" @click="close()">
            <div class="smalbox">
                <img class="topimg" src="../assets/img/laba.png" alt />
                <div>
                    <h1>- {{msgtext}}？-</h1>
                    <h2>相遇不易，再考虑考虑呗~</h2>
                    <h3>
                        <span>考虑考虑</span>
                    </h3>
                    <h4 @click="turntrue()">狠心放弃</h4>
                </div>
            </div>
        </div>
        <!--        <transition name="slide-fade1" enter-active-class="zoomIn" leave-active-class="fadeOutDown">-->
        <!--            -->
        <!--        </transition>-->
    </div>
</template>

<script>
export default {
    name: "propos",
    data() {
        return {};
    },
    props: ["openprops", "msgtext"],
    watch: {},
    mounted() {},
    methods: {
        close() {
            this.$emit("closeprops", this.showkey);
        },
        turntrue() {
            this.$emit("propskey", true);
        },
    },
};
</script>

<style scoped lang="less">
.propo {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    .smalbox {
        width: 6.3rem;
        height: 5.62rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -2.81rem;
        margin-left: -3.15rem;

        .topimg {
            width: 2.34rem;
            height: 1.89rem;
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -1.17rem;
        }

        div {
            width: 6.3rem;
            height: 4.82rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.2rem;
            margin-top: 0.8rem;
            overflow: hidden;

            h1 {
                font-size: 0.36rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                margin-top: 1.59rem;
            }

            h2 {
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                margin-top: 0.1rem;
            }

            h3 {
                width: 5.1rem;
                height: 0.86rem;
                background: rgba(255, 70, 45, 1);
                border-radius: 0.43rem;
                margin: 0.4rem auto 0;
                display: table;
                font-weight: normal;
                text-align: center;
                color: #fff;
                span {
                    display: table-cell;
                    vertical-align: middle;
                }
            }

            h4 {
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 400;
                text-decoration: underline;
                color: rgba(102, 102, 102, 1);
                line-height: 0.48rem;
                text-align: center;
                margin-top: 0.18rem;
            }
        }
    }
}
</style>